<template>
  <div class="menu">
    <div class="mainArea">
      <div
        v-for="item in this.list"
        :key="item.name"
        class="module-item"
        :style="{backgroundImage: 'url('+item.img+')'}"
        @click="handleFunc(item.name,item.path)"
      />
    </div>
  </div>
</template>

<script>

export default {
  name: 'Menu',
  data: function () {
    return {
      list: [
        {
          name: 'fileMove',
          path: '/home/filemove',
          img: require('../assets/copy.png')
        }
      ]
    }
  },
  methods: {
    handleFunc (name, path) {
      console.log(name)
      console.log(path)
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="scss">
.module-item{
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  margin: 20px;
  border: 1px solid #919191;
  border-radius: 5px;
  box-shadow:0 0 5px 2px #999;
  &:hover{
    animation-name: example;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
  }
}
@keyframes example {
  0%   {box-shadow:0 0 5px 2px #999;}
  10%   {box-shadow:0 0 6px 3px #999;}
  20%   {box-shadow:0 0 7px 4px #999;}
  30%   {box-shadow:0 0 8px 5px #999;}
  40%   {box-shadow:0 0 9px 6px #999;}
  50%   {box-shadow:0 0 10px 7px #999;}
  60%   {box-shadow:0 0 9px 6px #999;}
  70%   {box-shadow:0 0 8px 5px #999;}
  80%   {box-shadow:0 0 7px 4px #999;}
  90%   {box-shadow:0 0 6px 3px #999;}
  100%   {box-shadow:0 0 5px 2px #999;}
}
</style>
